<template>
  <div class="ly-content">
    <div class="ly-center">
      <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
        <yd-cell-group slot="list">
          <div class="news-item" @click="xgDetails(item.id)" v-for="item in list" :key="item.id">
            <div class="news-left">
              <div class="left-title"> {{item.theme}}</div>
              <div class="left-info">
                <yd-icon name="ucenter" size="0.3rem"></yd-icon>
                {{item.userName}} <span>{{item.releaseTime}}</span></div>
            </div>
            <div class="news-right" v-if="item.themeImg">
              <div class="right-img"
                   :style="{backgroundImage: 'url(' + item.themeImg + ')'}"></div>
            </div>
          </div>
        </yd-cell-group>

        <!-- 数据全部加载完毕显示 -->
        <span slot="doneTip">通知公告加载完毕~~</span>
        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
        <yd-icon name="more" slot="loadingTip" size=".42rem"></yd-icon>
      </yd-infinitescroll>
    </div>
  </div>
</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage";

  export default {
    data() {
      return {
        list: [],
        modal: [],
        pageNum: 1,
        pageSize: 15,
      }
    },
    created: function () {
      this.loadList();
    },
    methods: {
      loadList() {
        console.log("a");
        let newsList = [];
        let params = {
          housingId: storage.getObj("housingId").id,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        console.log(params);
        http.get('/communityApps/notice/getNotices', params).then(res => {
          console.log(res);
          if (res.data.code == 20000) {
            newsList = res.data.data.list;
            this.list = [...this.list, ...newsList];
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 2000
            });
          }
          if (newsList.length < this.pageSize) {
            /* 所有数据加载完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.pageNum++;
        });
      },
      xgDetails(id) {
        this.$router.push({
          path: '/notice/info',
          query: {
            id: id,
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .news-item {
    width: 100%;
    padding: 0.1rem 0.2rem;
    display: flex;
    border-bottom: 1px solid #eee;
    .news-left {
      flex: 1;
      height: auto;
      float: left;
      .left-title {
        height: 0.8rem;
        font-size: 0.3rem;
        margin-top: 0.05rem;
      }
      .left-info {
        color: #6c6c6c;
        padding-top: 0.2rem;
        span {
          padding-left: 0.2rem;
        }
      }
    }
    .news-right {
      width: 2rem;
      height: 1.5rem;
      float: right;
      .right-img {
        width: 2rem;
        height: 1.3rem;
        margin-top: 0.1rem;
        background-color: #fff;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }
</style>
